<template>
  <view style="background-color: azure;">
    <u-grid :border="false" col="2" style="margin-left: 14px;">
      <u-grid-item v-for="(product, index) in products" :key="index">
        <u-image class="product-image" :src="product.image" mode="aspectFill" width="96%" height="200rpx" />
        <view class="product-info">
          <view class="product-name">{{ product.name | truncate(10) }}</view>
          <view class="product-footer">
            <view class="product-price">￥{{ product.price }}</view>
            <view class="product-brand">{{ product.brand }}</view>
          </view>
        </view>
      </u-grid-item>
    </u-grid>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          id: 1,
          image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
          name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
          price: 199.99,
          brand: '品牌A'
        },
		{
		  id: 1,
		  image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
		  name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
		  price: 199.99,
		  brand: '品牌A'
		},
		{
		  id: 1,
		  image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
		  name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
		  price: 199.99,
		  brand: '品牌A'
		},
		{
		  id: 1,
		  image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
		  name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
		  price: 199.99,
		  brand: '品牌A'
		},
		{
		  id: 1,
		  image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
		  name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
		  price: 199.99,
		  brand: '品牌A'
		},
		{
		  id: 1,
		  image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
		  name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
		  price: 199.99,
		  brand: '品牌A'
		},
      ]
    };
  },
  filters: {
    truncate(value, length) {
      if (!value) return '';
      return value.length > length ? value.slice(0, length) + '...' : value;
    }
  }
};
</script>

<style>
.product-image {
  width: 100%;
  height: 200rpx;  
  border-radius: 15px; /* 圆角 */
}

.product-info {
  margin-left: 4px;
  margin-right: 4px;
  
}

.product-name {
  font-size: 14px;
  color: #333;
  margin-left: -40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px; /* 与价格和品牌名的距离 */
}

.product-footer {
  display: flex;
  justify-content: space-between; /* 使价格和品牌名分别对齐左右 */
  width: 100%;
}

.product-price {
  font-size: 16px;
  margin-left: -40px;
  color: #f00;
  margin-bottom: 10px;
}

.product-brand {
  font-size: 12px;
  margin-top: 2px;
  color: #666;
}
</style>